<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<%@include file="/WEB-INF/jsp/common/top_resources.jsp"%>
<link rel="stylesheet" type="text/css" href="${_root}/resources/css/jquery.tmailsilder.v2.css" />
</head>
<body class=" theme-blue"> 
		<%@include file="/WEB-INF/jsp/common/top.jsp"%>
	<c:set var="imgroot" value="/pic/"></c:set>
		<div class="container-fluid">
			<div class="row">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">文章分类列表</h3>
					</div>
					<div class="panel-body">

					<div class="allcategorys">
				<!--	<h3 class="title-item-hd"><a href="javascript:void(0);">文章分类<s class="icon"></s></a></h3>-->
					<ul class="sublist">
						<c:forEach items="${result.data.articleTypes}" var="item1">
							<c:if test="${item1.pid==1}">
							<li>
								<h3 class="mcate-item-hd" id="p${item1.id}"><span>${item1.name}</span></h3>
								<p class="mcate-item-bd">
								<c:forEach items="${result.data.articleTypes}" var="item2">
									<c:if test="${item1.id==item2.pid}">
										<a href="javascript:;" id="p${item1.id}-${item2.id}" onclick="changeBottom(${item1.id},${item2.id})">${item2.name}</a>
									</c:if>
								</c:forEach>
								</p>
							</li>
							</c:if>
						</c:forEach>
					</ul>
				</div>
				</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<!--<div class="header">
						<div class="input-group search pull-right hidden-sm hidden-xs">
							<div class="input-group">
								<input class="form-control" type="text">
								<span class="input-group-btn">
			                  <button class="btn btn-primary" type="button"><i class="fa fa-search "></i></button>
			              </span>
							</div>
						</div>
					</div>-->

					
					<!--<h1 class="page-title">情感文章列表</h1>-->
					<div class="main-content">
						<div class="row" style="margin-bottom: 20px;">
							<div class="col-lg-12">
								<ol class="breadcrumb">
									<li><a href="index" id="all">全部</a></li>
									<li><a href="javascript:;" id="father" onclick="changeBottomByParent()" parentID="${result.data.parentAndSon.parent.id}">${result.data.parentAndSon.parent.name}</a></li>
									<li id="son" class="active" sonID="${result.data.parentAndSon.son.id}">${result.data.parentAndSon.son.name}</li>
								</ol>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9 main-content">
								<div id="blog-posts">
								</div>
								<div id="pager" class="center-block">
									<ul class="pagination">
									</ul>
								</div>	
						</div>

							<div class="col-sm-3 sidebar">
								<div class="widget">
									<h3 style="margin-top: 0px;">Archives</h3>
									<div class="widget-body">
										<ul class="icons list-unstyled">
											<li>
												<a href="#"><i class="icon-angle-right"></i> June 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> May 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> April 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> March 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> February 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> January 2014</a>
											</li>
											<li>
												<a href="#"><i class="icon-angle-right"></i> December 2013</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="widget">

									<h3>Categories</h3>
									<p class="widget-body">
										<a href="#"><span class="large label tag label-info">Announcements</span></a>
										<a href="#"><span class="large label tag label-info">Company</span></a>
										<a href="#"><span class="large label tag label-info">News</span></a>
										<a href="#"><span class="large label tag label-info">Events</span></a>
										<a href="#"><span class="large label tag label-info">Info</span></a>
										<a href="#"><span class="large label tag label-info">Fun Stuff</span></a>
										<a href="#"><span class="large label tag label-info">News</span></a>
										<a href="#"><span class="large label tag label-info">Events</span></a>
										<a href="#"><span class="large label tag label-info">Company</span></a>
										<a href="#"><span class="large label tag label-info">Events</span></a>
										<a href="#"><span class="large label tag label-info">Company</span></a>
										<a href="#"><span class="large label tag label-info">News</span></a>
										<a href="#"><span class="large label tag label-info">Announcements</span></a>
										<a href="#"><span class="large label tag label-info">Events</span></a>
										<a href="#"><span class="large label tag label-info">Info</span></a>
										<a href="#"><span class="large label tag label-info">Fun Stuff</span></a>
									</p>

								</div>

								<div class="widget">
									<h3>About Us</h3>
									<p class="widget-body">
										We are a small, web based company providing innovative ideas for people and businesses. Our award winning products help people solve problems that they deal with each and every day.
									</p>
								</div>
							</div>

						</div>

						<footer>
							<hr>

							<!-- Purchase a site license to remove this link from the footer: http://www.portnine.com/bootstrap-themes -->
							<p class="pull-right">A
								<a href="http://www.portnine.com/bootstrap-themes" target="_blank">Free Bootstrap Theme</a> by
								<a href="http://www.portnine.com" target="_blank">Portnine</a>
							</p>
							<p>Â© 2014
								<a href="http://www.portnine.com" target="_blank">Portnine</a>
							</p>
						</footer>
					</div>
				</div>

			</div>
		</div>
	<!-- 底部资源 -->
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>

	<script type="text/javascript" src="${_root}/resources/js/jsp/index.js"></script>
	<script type="text/javascript">
		//全局数据
		const globalData={
			url:"${_root}/article/articleList",
			current:1,//当前页
			size:5,//每页大小
			totals:0,//总记录数
			pages:1, //总页数
			sonID:0, //子项ID
			parentID:401 //父项ID
		};
		
		$(function(){
			globalData.parentID = parseInt($("#father").attr("parentID"));
			globalData.sonID = parseInt($("#son").attr("sonID"));
			//定义table显示数据的模板
			const template=
			"<div class='row padding-bottom'>"+
			"<div class='col-md-4'>"+
			"<a href='\${_root}/article/detail?id=\${id}' class='thumb'><img src='${imgroot}\${imageUrl}' class='img-responsive hidden-xs' style='width:100%;max-height:225px'></a></div>"+
			"<div class='col-md-8'>"+
			"<div class='post-summary'>"+
			"<h3 style='margin-top: 0px;'><a href='\${_root}/article/detail?id=\${id}'>\${title}</a></h3>"+
			"<p class='text-sm'>"+
			"\${tdate}</p>"+
			"<p>\${introduction}</p>"+
			"<p><a class='btn btn-default btn-sm' href='\${_root}/article/detail?id=\${id}'>Read more</a></p>"+
			"</div></div></div>";
			$.template("list",template);//注册模板
			getServerData(globalData.url,globalData.current,globalData.size);//获取服务器数据
		});
			
		</script>

</body>
</html>